<template>
  <div class="xiaomi">
    <div class="head">
      <div class="main">
        <ul class="list">
          <li>我的订单</li>
          <li @click="goCart('/register')">注册</li>
          <li @click="goCart('/login')">登录</li>
        </ul>
      </div>
    </div>
    <div class="banner clearfix">
      <div class="main clearfix">
        <div class="search">
          <div class="s-left">
            <p class="icon">MI</p>
            <p class="text">一个理想的生活方式</p>
          </div>
          <ul class="s-middle">
            <li>
              <div class="a">
                手机
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds" :key="index">
                      <img :src="kind.img" alt />

                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="a">
                红米
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds1" :key="index">
                      <img :src="kind.img" alt />
                      <!-- <img src="./images/xq1.png"> -->
                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="a">
                电视
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds2" :key="index">
                      <img :src="kind.img" alt />
                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
             <div class="a">
                笔记本
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds3" :key="index">
                      <img :src="kind.img" alt />
                      <!-- <img src="./images/xq1.png"> -->
                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
             <div class="a">
                家电
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds4" :key="index">
                      <img :src="kind.img" alt />
                      <!-- <img src="./images/xq1.png"> -->
                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
             </div>
            </li>
            <li>
              <div class="a">
                路由器
                <div class="kind">
                  <div class="main">
                    <div class="good" v-for="(kind,index) in kinds5" :key="index">
                      <img :src="kind.img" alt />
                      <!-- <img src="./images/xq1.png"> -->
                      <p class="xq" v-text="kind.title"></p>
                      <p class="price" v-text="kind.price"></p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="a">社区</div>
            </li>
          </ul>
          <div class="s-right pr">
            <input type="text" />
            <img class="searchImg" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u272.svg" alt />
            <img class="cart"
            @click="goCart('/cart')"
             src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u274.svg" alt />
            <p class="num pa">6</p>
          </div>
        </div>
        <div class="lunbo pr">
          <div class="nav pa">
            <div class="nav1 pr">
              电脑 盒子
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa">
                <p class="title">电脑 盒子</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              笔记本 显示器 平板
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-53px">
                <p class="title">笔记本 显示器 平板</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds1" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              家电 插线板
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-106px">
                <p class="title">家电 插线板</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              出行 穿戴
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-159px">
                <p class="title">出行 穿戴</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds1" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              智能 路由器
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-212px">
                <p class="title">智能 路由器</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              电源 配件
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-265px">
                <p class="title">电源 配件</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds1" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              健康 儿童
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-318px">
                <p class="title">健康 儿童</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="nav1 pr">
              耳机 音箱
              <img class="fr praw" src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u123.svg" alt />
              <div class="box pa" style="top:-371px">
                <p class="title">耳机 音箱</p>
                <ul class="goodkind">
                  <li v-for="(item,index) in goodkinds1" :key="index">
                    <img :src="item.img" class="fl" alt />
                    <p class="fl" v-text="item.name"></p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="lunboImg">
            <el-carousel :interval="2000" :autoplay="true" arrow="always">
              <el-carousel-item v-for="(item,index) in lunbos" :key="index">
                <img :src="item.img" alt />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="itc">
            <div class="empty"></div>
            <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u124.png" alt />
            <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u125.png" alt />
            <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u126.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="goodit">
      <div class="main">
        <div class="first">
          <h5>小米闪购</h5>
          <div class="time">
            <div class="t-left fl">
              <p class="sgtitle">14:00场次</p>
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u148.svg" alt />
              <p class="sgtime">距离结束还有</p>
              <div class="endtime">
                <p class="fl num" id="h"></p>
                <p class="fl dd">:</p>
                <p class="fl num" id="m"></p>
                <p class="fl dd">:</p>
                <p class="fl num" id="s"></p>
              </div>
            </div>
            <el-carousel :interval="2000" arrow="never" class="t-right fr">
              <el-carousel-item v-for="(shgou,index) in shangous" :key="index">
                <div class="tf-good" v-for="(item,index) in shgou.type" :key="index">
                  <img :src="item.img" alt />
                  <p class="tf-title" v-text="item.title"></p>
                  <p class="tf-it" v-text="item.it"></p>
                  <p class="tf-price" v-for="it in item.price" :key="it.id">
                    <span class="new" v-text="it.newPrice"></span>
                    <span class="old" v-text="it.oldPrice"></span>
                  </p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u184.png" alt class="redmi" />
        <div class="second">
          <h5>手机</h5>
          <div class="sj">
            <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u187.png" alt class="sj-left" />
            <ul class="sj-right">
              <li v-for="item in rights" :key="item.id" @click="goDetail('/information/',item.id)">
                <img :src="item.img" alt />
                <p class="sj-title" v-text="item.name"></p>
                <p class="sj-cpu" v-text="item.cpu"></p>
                <p class="sj-price" v-text="item.price"></p>
              </li>
            </ul>
          </div>
        </div>
        <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u198.png" class="ysj" alt />
        <div class="third">
          <h5>搭配</h5>
          <div class="sj">
            <div class="sj-left">
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u209.png" alt class="top" />
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u206.png" alt class="bottom" />
            </div>
            <ul class="sj-right">
              <li v-for="(item,index) in dps" :key="index">
                <img :src="item.img" alt />
                <p class="sj-title" v-text="item.name"></p>
                <p class="sj-cpu" v-text="item.js"></p>
                <p class="sj-price" v-text="item.price"></p>
              </li>
            </ul>
          </div>
        </div>
        <div class="fourth">
          <h5>周边</h5>
          <div class="sj">
            <div class="sj-left">
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u133.png" alt class="top" />
              <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u130.png" alt class="bottom" />
            </div>
            <ul class="sj-right">
              <li v-for="(item,index) in zbs" :key="index">
                <img :src="item.img" alt />
                <p class="sj-title" v-text="item.name"></p>
                <p class="sj-cpu" v-text="item.js"></p>
                <p class="sj-price" v-text="item.price"></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="main">
        <img src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u203.png" alt />
      </div>
    </div>
    <ul class="dh">
      <li>
        <img
          id="sj"
          src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u227.svg"
          alt
        />
        手机APP
      </li>
      <li>
        <img
          id="person"
          src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u234.svg"
          alt
        />
        个人中心
      </li>
      <li>
        <img
          id="rg"
          src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u240.svg"
          alt
        />
        人工客服
      </li>
      <li class="pr" @click="goCart('/cart')">
        <img
          id="carted"
          src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u249.svg"
          alt
        />
        <img
          id="pa"
          class="pa"
          src="http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u247.svg"
          alt
        />
        购物车
      </li>
    </ul>
    <el-backtop :visibility-height="600" :bottom="200">
      <div>
        <p>回到顶部</p>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import axios from "axios";
export default {
      data:()=>({
      kinds:[],
        kinds1:[],
       kinds2:[],
       kinds3:[],
       kinds4:[],
       kinds5:[],
       goodkinds:[],
       goodkinds1:[],
       rights:[],
       dps:[],
       zbs:[],
       lunbos:[],
       shangous:[]
      }),
      created(){
        this.getKinds()
        this.getGoodKinds()
        this.getRight()
        this.getDp()
        this.getZb()
        this.getLunbo()
        this.getShgou()
      },
      mounted(){
            var com=new Date("10 26,2020 24:00:00")
            var h=document.getElementById("h")
            var m=document.getElementById("m")
            var s=document.getElementById("s")
            
            var x=setInterval(function(){ 
                var now=new Date();
                var des=com.getTime()-now.getTime()
                //  console.log(des)

                var hours=Math.floor(des%(1000*60*60*24)/(1000*60*60))
                var mins=Math.floor(des%(1000*60*60)/(1000*60))
                var secs=Math.floor(des%(1000*60)/1000)

                h.innerHTML=getTrueNumber(hours)
                m.innerHTML=getTrueNumber(mins)
                s.innerHTML=getTrueNumber(secs)
            },1000);
            function getTrueNumber(x){
              if(x<10) return '0'+x
              else return x
            } 
      },
      methods:{
        async getKinds(){
          try {
            const res=await axios.get('http://10.41.152.13:3000/kinds')
            const res1=await axios.get('http://10.41.152.13:3000/kinds1')
            const res2=await axios.get('http://10.41.152.13:3000/kinds2')
            const res3=await axios.get('http://10.41.152.13:3000/kinds3')
            const res4=await axios.get('http://10.41.152.13:3000/kinds4')
             const res5=await axios.get('http://10.41.152.13:3000/kinds5')
            this.kinds=res.data
             this.kinds1=res1.data
             this.kinds2=res2.data
              this.kinds3=res3.data
            this.kinds4=res4.data
            this.kinds5=res3.data
            // console.log(res.data)
          } catch (error) {
            console.log(11111111111111)
          }
        },
        async getGoodKinds(){
            try {
            const res=await axios.get("http://10.41.152.13:3000/goodkind")
             const res1=await axios.get("http://10.41.152.13:3000/goodkind1")
            // console.log(res)
            this.goodkinds=res.data
            this.goodkinds1=res1.data
            } catch (error) {
              console.log(error)
            }
       },
       async getRight(){
        try {
          const res=await axios.get('http://10.41.152.13:3000/sj-right')
         this.rights=res.data
        } catch (error) {
          console.log(error)
        }
       },
       async getDp(){
         try {
           const  res=await axios.get("http://10.41.152.13:3000/dp")
           this.dps=res.data
         } catch (error) {
           console.log(error)
         }
       },
        async getZb(){
         try {
           const  res=await axios.get("http://10.41.152.13:3000/zb")
           this.zbs=res.data
         } catch (error) {
           console.log(error)
         }
       },
       async getLunbo(){
         try {
           const  res=await axios.get("http://10.41.152.13:3000/lunbo")
           this.lunbos=res.data
         } catch (error) {
           console.log(error)
         }
       },
       async getShgou(){
         try {
           const  res=await axios.get("http://10.41.152.13:3000/shgou")
           this.shangous=res.data
         } catch (error) {
           console.log(error)
         }
       },
       goDetail(url,id){
          this.$router.push(url + id)
       },
        goCart(url){
          this.$router.push(url)
       }
      }
}
</script>

<style lang="less">
    *{margin: 0;padding: 0;}
    li{list-style: none;}
    img{display: block;}
    .pa{position: absolute;}
    .pr{position: relative;}
    .fl{float: left;}
    .fr{float: right;}
    input{outline: none;}
    a{text-decoration: none;}
    .main{
      width: 1240px;
      margin: 0 auto;
    }
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

    .head{
      height: 42px;
      background-color: #333333;
      line-height: 42px;
      .list{
        li{
          cursor: pointer;
          text-align: center;
          width: 80px;
          float: right;
          font-size: 15px;
          color: #F2F2F2;
        }
      }
    }
    .banner{
      position: relative;
      .search{
        padding-top: 10px;
        box-sizing: border-box;
        height: 140px;
        .s-left{
          width: 118px;
          height: 120px;
          float: left;
          .icon{
                width: 41px;
                height: 42px;
                display: flex;
                margin:10px 0;
                font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial';
                font-weight: 700;
                font-style: normal;
                font-size: 36px;
                color: #F59A23;
          }
          .text{
            font-size: 13px;
          }
        }
        .s-middle{
          float: left;
          margin-top: 40px;
          margin-left: 100px;
          li{
            float: left;
            font-size: 15px;
            .a{
            cursor: pointer;
            width: 79px;
            height: 90px;
            line-height: 35px;
            text-align: center;
            color: black;
            &:hover{color: rgb(236, 103, 10);}
            .main{
              display: flex;
              justify-content: space-around;
            }
            .kind{
              position: absolute;
              display: none;
              z-index: 1000;
              width: 100%;
               border-top: 1px solid #cccccc;
              top: 140px;
              left: 0;
              height: 260px;
              box-shadow: 3px 5px 5px #cccccc;
              background-color: #ffffff;
              .good{
                width: 150px;
                img{
                  width: 150px;
                  height: 103px;
                  margin-top: 40px;
                }
                .xq{color: black;font-size: 13px;}
                .price{color: rgb(236, 103, 10);font-size: 13px;}
              }
            }
            &:hover .kind{
              display: block;
            }
            }
          }
        }
        .s-right{
          float: right;
          margin-top: 30px;
          input{
            border: 0;
            margin-right: 40px;
            border-bottom: 1px solid #ccc;
            width: 300px;
            height: 35px;
          }
          .searchImg{
            position: absolute;
            right: 54px;
            bottom: 8px;
          }
          .cart{
            position: absolute;
            bottom: 4px;
            right: 0;
          }
          .num{
            right: -6px;
            top: 0;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            background-color: red;
            color: white;
          }
        }
      }
      .lunbo{
         height: 650px;
         .nav{
           width: 204px;
           height: 423px;
           z-index: 99;
           background-color: rgba(8, 8, 8, 0.6);
           .nav1{
             cursor: pointer;
             padding: 2px 2px 0px 20px;
             box-sizing: border-box;
             width: 204px;
             height: 53px;
             line-height: 53px;
             font-size: 14px;
             color: #F2F2F2;
             &:hover{background: rgba(245,154,35,1);}
             &:hover .box{display: block;}
             img.praw{
               width: 9px;
               height: 16px;
              position: absolute;
              left: 175px;
              top: 17px;
             }
           }
            .box{
             top: 0;
             left:204px ;
             width: 1022px;
             height: 423px;
             box-sizing: border-box;
             padding: 0 20px;
             display: none;
             background-color: #fff;
             box-shadow:4px 4px 4px #cccccc;
             z-index: 1000;
             color: black;
             .title{font-size: 20px;}
             .goodkind{
               width: 982px;
               display: flex;
               justify-content: space-between;
               flex-wrap: wrap;
               li{
                 width: 25%;
                 height: 50px;
                 margin-top: 22px;
                 img{margin-top: 4px;}
                 p{margin-left: 20px;}
                 &:nth-child(4n){
                   width: 15%;
                 }
               }
             }
           }
         }
        .lunboImg{
          width: 1226px;
          height: 423px;
         overflow: hidden;
         margin-bottom: 20px;
         .el-carousel__container{
            width: 1226px;
           height: 423px;
           .el-carousel__arrow--left{
             left: 224px;
           }
           .el-carousel__arrow--right{
             right: 44px;
           }
         }
        }
        .itc{
          width: 1226px;
          display: flex;
          justify-content: space-between;
          .empty{
            width: 195px;
            height: 174px;
            background: rgba(0, 0, 0, 0.725490196078431);
          }
          img{
            width:323px;
            height: 174px;
          }
        }
      }
    }
    .goodit{
      background-color: rgba(242, 242, 242, 1);
      h5{
        height: 56px;
        font-size: 22px;
        line-height: 56px;
        font-weight: normal;
        padding-left: 2px;
        box-sizing: border-box;
        color: #333333;
      }
      .first{
        padding-bottom:30px ;
        .time{
          height: 317px;
          // background: red;
          .t-left{
            width: 237px;
            height: 317px;
            background-color: rgba(241,237,237,1);
            .sgtitle{
              text-align: center;
              font-size: 17px;
              padding: 40px 0 30px;
              color: rgba(217, 0, 27, 0.631372549019608);
            }
            .sgtime{
              color: #7F7F7F;
              font-size: 15px;
              text-align: center;
              margin-bottom:30px;
            }
            .endtime{
              width: 180px;
              height: 40px;
              margin: auto;
              .num{
                width: 42px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                margin-left:4px;
                background-color: #605751;
                font-weight: 700;
                font-size: 25px;
                color: #ffffff;
              }
              .dd{
                width: 20px;
                height: 42px;
                line-height: 42px;
                text-align: center;
                font-size: 20px;
                color: #7F7F7F;
                font-weight: 900;
              }
            }
            img{
              width: 40px;
              height: 54px;
              margin: 0 auto 40px;
            }
          }
          .t-right{
            width: 955px;
            height: 317px;
            overflow: hidden;
            .el-carousel__container{
              height: 317px;
            }
            .el-carousel__button{
              display: none;
            }
            .el-carousel__item{
              width: 955px;
              height: 317px;
              display: flex;
              justify-content: space-between;
              .tf-good{
                width: 213px;
                height: 317px;
                box-sizing: border-box;
                padding: 20px;
                background-color: #ffffff;
                img{
                  width: 162px;
                  height: 162px;
                  margin: auto;
                }
                p{
                   font-size: 13px;
                  text-align: center;
                }
                .tf-title{
                  margin: 15px 0 10px;
                  color: #333;
                }
                .tf-it{
                  color: #cccccc;
                }
                .tf-price{
                  margin-top: 20px;
                  .new{
                    color: orange;
                    padding-right:30px;
                  }
                  .old{
                    color: #ccc;
                    text-decoration: line-through;
                  }
                }
              }
            }
          }
        }
      }
      .redmi,.ysj{
        width: 1240px;
        height: 120px;
      }
      .second,.third,.fourth{
        padding-bottom: 30px;
        .sj{
          display: flex;
          justify-content: space-between;
          .sj-left{
            width: 214px;
            height: 567px;
            img{
              width: 214px;
              height: 264px;
            }
            .top{
              margin: 6px 0 25px;
            }
          }
          .sj-right{
            width: 990px;
            height: 575px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            // background: orange;
            li{
              width: 228px;
              height: 275px;
              background-color: #ffffff;
              img{
                 width: 141px;
                height: 141.994px;
                margin: auto;
                margin-bottom: 10px;
              }
              p{text-align: center;
                 font-size: 13px;
              }
              .sj-cpu{color: #AAAAAA;
                  margin: 10px 0 20px;
              }
              .sj-price{color: #F59A23;
                font-weight: 700;
              }
               &:hover{
                box-shadow: 10px 10px 20px #cccccc;
              }
            }
          }
        }
      }
      .third,.fourth{padding-bottom: 0;}
    }
    .footer{
      background-color: rgba(242, 242, 242, 1);
      img{
        width: 1240px;
      }
    }
    .dh{
      z-index: 999;
      position: fixed;
      width: 96px;
      height: 400px;
      background: #ffffff;;
      right: 0;
      top: 100px;
      li{
        width: 96px;
        height: 95px;
        text-align: center;
        box-sizing: border-box;
        padding-top: 20px;
        font-size: 13px;
        color: #7F7F7F;
        img{
          margin: 0 auto 10px;
        }
        #sj{
          width: 17px;
          height: 32px;
        }
        #carted{
          width: 28px;
          height: 25px;
          cursor: pointer;
        }
        #pa{
          right: 34px;
          top: 25px;
        }
      }
    }
    .db{
       width: 96px;
        height: 95px;
    }
    .el-backtop{
          // z-index:9999 ;
          width: 23px;
          height: 27px;
          position: fixed;
          border-radius:0;
          background: #ffffff url("http://www.pmdaniu.com/storages/118216/35d670b23e5c3fa754c09548a7027c28-15991/images/%E9%A6%96%E9%A1%B5/u255.svg") no-repeat;
          div p{
            width: 96px;
            height: 16px;
            color: #7F7F7F;
            font-size: 13px;
            margin-top: 70px;
            text-align: center;
          }
       }
</style>